<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>改变div样式事件</title>
	<style type="text/css">
    *{margin:0;padding:0;}
    body{
      background: #000;
    }
    .clear{
      clear: both;
    }
    #box{
      width: 790px; height:450px;
      background: #EFEFEF;
      margin: 100px auto;
      padding: 25px;
      position: relative;
    }
    h2{
       float: left;
    }
    #box_1{
      width: 100px; height: 40px;
      background: #FF0000;
      border: none;
    }
    #box_2{
      border: 3px solid #000;
      width: 100px; height: 100px;
      margin-top: 20px;
       float: left;
    }
    #box_3{
      border: 20px solid #9C949C;
      width: 240px; height: 160px;
      padding: 20px 30px;
      position: absolute;right: 25px;bottom: 25px;
      background: #fff;
      display: none;
    }
    .smbox{
      margin-bottom: 10px;
    }
    #box_3 strong{
      display: inline-block;
      width: 120px;height: 30px;
    }
    #box_3 .smbox button{
      width: 35px;height: 35px;
      text-align: center;
      line-height: 30px;
      border: none;
    }
    #box_3 .foot{
      padding: 0 50px;
    }
    #box_3 .foot button{
      width: 60px;height: 30px;
      background: #002952;
      color: #fff;
      border: none;
    }
  </style>
</head>
<body>
	<div id="box">
    <h2>请为下面的DIV设置样式：</h2>
    <button id="box_1"><b>点击设置</b></button>
    <div class="clear"></div>
    <div id="box_2"></div>
    <div id="box_3">
      <div class="smbox">
        <strong>选择背景颜色：</strong>
        <button id="hong" style="background-color:red; color:#fff;">红</button>
        <button id="huang" style="background-color:yellow; color:#fff;">黄</button>
        <button id="lan" style="background-color:blue; color:#fff;">蓝</button>
      </div>
      <div class="smbox">
        <strong>选择宽(px)：</strong>
        <button id="k200" style="background-color:#9C949C;">200</button>
        <button id="k300" style="background-color:#9C949C;">300</button>
        <button id="k400" style="background-color:#9C949C;">400</button>
      </div>
      <div class="smbox">
        <strong>选择高(px)：</strong>
        <button id="g200" style="background-color:#9C949C;">200</button>
        <button id="g300" style="background-color:#9C949C;">300</button>
        <button id="g400" style="background-color:#9C949C;">400</button>
      </div>
      <div class="foot">
        <button id="foot_1">恢复</button>
        <button id="foot_2">确定</button>
      </div>
    </div>  
  </div>
	<script type="text/javascript">
    var shezhi = document.getElementById('box_1');
    var div2 = document.getElementById('box_2');
    var div3 = document.getElementById('box_3');
    var foot_1 = document.getElementById('foot_1');
    var foot_2 = document.getElementById('foot_2');
    var hong = document.getElementById('hong');
    var huang = document.getElementById('huang');
    var lan = document.getElementById('lan');
    var k200 = document.getElementById('k200');
    var k300 = document.getElementById('k300');
    var k400 = document.getElementById('k400');
    var g200 = document.getElementById('g200');
    var g300 = document.getElementById('g300');
    var g400 = document.getElementById('g400');
    shezhi.onclick = function(){div3.style.display = "block"}
    foot_2.onclick = function(){div3.style.display = "none"}
    hong.onclick = function(){div2.style.background = "red"}
    huang.onclick = function(){div2.style.background = "yellow"}
    lan.onclick = function(){div2.style.background = "blue"}
    k200.onclick = function(){div2.style.width = "200px"}
    k300.onclick = function(){div2.style.width = "300px"}
    k400.onclick = function(){div2.style.width = "400px"}
    g200.onclick = function(){div2.style.height = "200px"}
    g300.onclick = function(){div2.style.height = "300px"}
    g400.onclick = function(){div2.style.height = "400px"}
    foot_1.onclick = function(){
    div2.style.background = "#EFEFEF"
    div2.style.width = "100px"
    div2.style.height = "100px"
    }
  </script>
	
</body>
</html>